<template>
  <view class="container">
    <image-cropper
      v-if="src"
      ref="cropper"
      :src="src"></image-cropper>
    <button
      @click="chooseImage"
      class="btn">
      选择图片
    </button>

    <button
      @click="cancelCrop"
      class="cancel-btn">
      取消
    </button>
    <button
      @click="startCrop"
      class="confirm-btn">
      确定
    </button>
  </view>
</template>

<script setup lang="ts">
  import { ref } from "vue";
  import { onLoad } from "@dcloudio/uni-app";
  import ImageCropper from "./ImageCropper.vue";

  const src = ref("");
  const cropper = ref();
  const chooseImage = () => {
    uni.chooseImage({
      count: 1,
      success(res: UniApp.ChooseImageSuccessCallbackResult) {
        console.log("res", res);
        src.value = res.tempFilePaths[0];
      },
    });
  };
  const startCrop = async () => {
    const res = await cropper.value.cropImage();
    console.log("res index", res);
    uni.previewImage({
      urls: [res.tempFilePath],
    });
  };

  const cancelCrop = () => {
    src.value = "";
  };
  onLoad(() => {
    console.log("onLoad");
  });
</script>

<style>
  .container {
    width: 100%;
    height: 100%;
  }
  .btn {
    position: fixed;
    width: 100px;
    height: 50px;
    bottom: 10px;
    left: 10px;
  }
  .cancel-btn {
    position: fixed;
    width: 100px;
    height: 50px;
    bottom: 10px;
    left: 150px;
  }
  .confirm-btn {
    position: fixed;
    width: 100px;
    height: 50px;
    right: 10px;
    bottom: 10px;
  }
</style>
